<template>
  <div class="product-menu-page">
    <router-link
      to="/market"
      class="item-box"
      :class="{ active: activeIndex === 1 }"
    >
      <div class="icon"></div>
      <div class="text">社媒洞察</div>
    </router-link>
    <router-link to="" class="item-box" :class="{ active: activeIndex === 2 }">
      <div class="icon"></div>
      <div class="text">商品大盘</div>
      <div class="list-children">
        <router-link to="/market/product" class="box">
          <div class="icon icon-1"></div>
          <div class="text">品类分析</div>
        </router-link>
        <router-link to="" class="box">
          <div class="icon icon-2"></div>
          <div class="text">商品库</div>
        </router-link>
      </div>
    </router-link>
    <router-link to="" class="item-box" :class="{ active: activeIndex === 3 }">
      <div class="icon"></div>
      <div class="text">闪电增长</div>
      <div class="list-children">
        <router-link to="/market/lightning" class="box">
          <div class="icon icon-3"></div>
          <div class="text">营销概念</div>
        </router-link>
        <router-link to="" class="box">
          <div class="icon icon-4"></div>
          <div class="text">商品品牌</div>
        </router-link>
        <router-link to="" class="box">
          <div class="icon icon-5"></div>
          <div class="text">产品类目</div>
        </router-link>
        <router-link to="" class="box">
          <div class="icon icon-6"></div>
          <div class="text">社媒平台</div>
        </router-link>
      </div>
    </router-link>
    <router-link to="" class="item-box">
      <div class="icon"></div>
      <div class="text">选品建议</div>
    </router-link>
    <router-link to="" class="item-box">
      <div class="icon"></div>
      <div class="text">竞品跟踪</div>
    </router-link>
    <router-link to="" class="item-box">
      <div class="icon"></div>
      <div class="text">研究报告</div>
    </router-link>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const props = defineProps(["index"]);
const activeIndex = ref(1);
onMounted(() => {
  activeIndex.value = props.index;
});
</script>
<style lang="scss" scoped>
.product-menu-page {
  width: 80px;
  display: flex;
  flex-direction: column;
  .item-box {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000;
    position: relative;
    .icon {
      background-repeat: no-repeat;
      background-size: 32px;
      width: 32px;
      height: 32px;
      background-position: center;
    }
    .text {
      margin-top: 8px;
      line-height: 1.2;
      color: #666;
    }
    &:nth-child(1) {
      .icon {
        background-image: url("../../assets/market/icon-1.png");
      }
    }
    &:nth-child(2) {
      .icon {
        background-image: url("../../assets/market/icon-2.png");
      }
    }
    &:nth-child(3) {
      .icon {
        background-image: url("../../assets/market/icon-3.png");
      }
    }
    &:nth-child(4) {
      .icon {
        background-image: url("../../assets/market/icon-4.png");
      }
    }
    &:nth-child(5) {
      .icon {
        background-image: url("../../assets/market/icon-5.png");
      }
    }
    &:nth-child(6) {
      .icon {
        background-image: url("../../assets/market/icon-6.png");
      }
    }
    .list-children {
      flex-wrap: wrap;
      justify-content: space-between;
      position: absolute;
      width: 216px;
      top: 0;
      right: -236px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
      padding: 10px;
      z-index: 10;
      display: none;
      .box {
        width: 100px;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        margin-bottom: 10px;
        color: #333;
        &:last-child {
          margin-bottom: 0;
        }
        &:nth-last-child(2) {
          margin-bottom: 0;
        }
        .icon {
          width: 44px;
          height: 44px;
          background-repeat: no-repeat;
          background-size: 44px;
          &.icon-1 {
            background-image: url("../../assets/market/icon-7.png");
          }
          &.icon-2 {
            background-image: url("../../assets/market/icon-8.png");
          }
          &.icon-3 {
            background-image: url("../../assets/market/icon-9.png");
          }
          &.icon-4 {
            background-image: url("../../assets/market/icon-10.png");
          }
          &.icon-5 {
            background-image: url("../../assets/market/icon-11.png");
          }
          &.icon-6 {
            background-image: url("../../assets/market/icon-12.png");
          }
        }
        .text {
          color: #333;
        }
        &:hover {
          background-color: #f5f5f5;
          .icon {
            &.icon-1 {
              background-image: url("../../assets/market/icon-7-on.png");
            }
            &.icon-2 {
              background-image: url("../../assets/market/icon-8-on.png");
            }
            &.icon-3 {
              background-image: url("../../assets/market/icon-9-on.png");
            }
            &.icon-4 {
              background-image: url("../../assets/market/icon-10-on.png");
            }
            &.icon-5 {
              background-image: url("../../assets/market/icon-11-on.png");
            }
            &.icon-6 {
              background-image: url("../../assets/market/icon-12-on.png");
            }
          }
        }
      }
    }
    &.active,
    &:hover {
      background-color: #e3edff;
      .text {
        color: #2171fe;
      }
      &:nth-child(1) {
        .icon {
          background-image: url("../../assets/market/icon-1-on.png");
        }
      }
      &:nth-child(2) {
        .icon {
          background-image: url("../../assets/market/icon-2-on.png");
        }
      }

      &:nth-child(3) {
        .icon {
          background-image: url("../../assets/market/icon-3-on.png");
        }
      }
      &:nth-child(4) {
        .icon {
          background-image: url("../../assets/market/icon-4-on.png");
        }
      }
      &:nth-child(5) {
        .icon {
          background-image: url("../../assets/market/icon-5-on.png");
        }
      }
      &:nth-child(6) {
        .icon {
          background-image: url("../../assets/market/icon-6-on.png");
        }
      }
    }
    &:hover {
      .list-children {
        display: flex;
      }
    }
  }
}
</style>
